<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>首页</title>
    <link href="../static/css/comment.css" type="text/css" rel="stylesheet">
    <script src="../static/js/comment.js"></script>
    <script src="../static/js/jquery-1.8.0.js"></script>
    <style>
        .detailed-03 a {
            text-decoration: none;
            padding: 5px;
            transition: border-color 0.3s, color 0.3s;
        }

        .detailed-03>ul>li:nth-of-type(4)> a.active {
            border:1px solid  #FF6D6D; /* 选中时边框颜色 */
            color: #FF6D6D;            /* 选中时字体颜色 */
        }
        .ninini {
            display: flex;
            flex-direction: column; /* 垂直排列图片 */
            align-items: center; /* 图片居中对齐 */
            gap: 10px; /* 图片之间的间距 */
        }

        .ninini img {
            width: 800px; /* 设置图片宽度 */
            height: auto; /* 高度自动调整 */
        }
    </style>
</head>
<body>
<div>
    <%@include file="head.jsp"%>
    <div class="top-000">
        <div class="detailed-01">
            <div class="detailed-04">
                <c:forEach var="imgss" items="${imgs}">
                    <span><img id="main-image" src="image/${imgss.img01}" height="400" width="400" /></span>
                    <ul class="detailed-02">

                        <c:if test="${not empty imgss.img01}">
                            <li><a><img src="image/${imgss.img01}" height="70" width="70"data-main="image/${imgss.img01}"/></a></li>
                        </c:if>
                        <c:if test="${not empty imgss.img02}">
                            <li><a><img src="image/${imgss.img02}" height="68" width="68" data-main="image/${imgss.img02}"/></a></li>
                        </c:if>
                        <c:if test="${not empty imgss.img03}">
                            <li><a><img src="image/${imgss.img03}" height="68" width="68" data-main="image/${imgss.img03}"/></a></li>
                        </c:if>
                        <c:if test="${not empty imgss.img04}">
                            <li><a><img src="image/${imgss.img04}" height="68" width="68" data-main="image/${imgss.img04}"/></a></li>
                        </c:if>
                        <c:if test="${not empty imgss.img05}">
                            <li><a><img src="image/${imgss.img05}" height="68" width="68" data-main="image/${imgss.img05}"/></a></li>
                        </c:if>
                    </ul>

            </div>
            <div class="detailed-03">
                <c:forEach var="shop" items="${shopss}">
                    <ul>

                        <li style="font-size: 28px"><img src="../static/image/Xin.png" height="32" width="63"/>${shop.shopsInfo}</li>
                        <li><span style="color: #FF6D6D ; font-size: 20px">￥</span><span style="color: #FF6D6D; font-size: 32px">${shop.price}</span></li>
                        <li>
                            优惠&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="../static/image/GOU.png" width="55" height="24"><span id="address">部分地区满1元包邮</span>
                            <div class="detailed-05" style="padding:20px 18px;width: 530px; background-color: #ffe1e1 "><a href="#" >查看活动></a>
                                <p>活动适用地区：北京、天津、河北省、山西省、内蒙古自治区、辽宁省、吉林省、黑龙江省、上海、江苏省、浙江省、安徽省、福建省、江西省、山东省、河南省、湖北省、湖南省、广东省、广西壮族自治区、海南省、重庆、四川省、贵州省、云南省、西藏自治区、陕西省、甘肃省、青海省、宁夏回族自治区、新疆维吾尔自治区</p>
                            </div>
                        </li>
                        <li>规格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a data-main01="../static/image/deta0404.webp">嵴锋龙款</a>&nbsp;&nbsp;<a data-main01="../static/image/deta04.webp">鳍游龙款</a>&nbsp;&nbsp;<a data-main01="../static/image/click02.webp">匿叶龙款</a></li>
                        <li>数量&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <div class="quantity-container">
                                <input type="button" name="minus" class="jian" value="-" onclick="minus();">
                                <input type="text" name="amount" class="shu" value="1" readonly>
                                <input type="button" name="plus"  class="jia " value="+" onclick="plus();">
                            </div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a style="color: #989b9e">库存1284件</a>
                        </li>
                        <li>
                            <form method="post" action="addTrolleyServlet">
                                <li>
                                    <input type="hidden" name="img" value="${../static/imgss.img01}">
                                    <input type="hidden" name="id" value="${shop.id}">
                                    <input type="hidden" name="trolleyName" value="${shop.shopsInfo}">
                                    <input type="hidden" name="number" value="">
                                    <input type="hidden" name="price" id="totalPrice" value="${shop.price}">
                                    <input type="hidden" name="total" id="total" value="1">
                                    <input type="hidden" name="ZhiId" id="ZhiId" value="0">
                                </li>
                                <input type="submit" name="Money" id="button" value="立即购买"><input type="submit" name="Go" id="button01" value="加入购物车" >
                            </form>
                        </li>
                    </ul>
                </c:forEach>
                </c:forEach>
            </div>
            <div class="a01010">
                <div class="detailed-07">
                    <div style="margin-left: 200px"><span style="color: #ff6d6d;font-size: 15px" id="shops">商品详情&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #ff6d6d;font-size: 15px" id="say">评价(102)</span></div>
                </div>
                <div class="detailed-001">
                    <div class="dadsa">
                        <a class="background-img"></a><a style="margin-top:10px;margin-left: 8px ">原神万有铺子<span style="font-size: 10px;background-color: yellow;">官方<br></span><br><span style="color: #989b9e">3572件官方商品在售</span></a><a style="margin-left: 500px">查看全部</a>
                    </div>
                    <div class="ninini">
                        <div><img src="../static/image/xaingqing02.webp" height="1025" width="800"></div>
                        <div><img src="../static/image/xiangqing03.webp" height="1025" width="800"></div>
                        <div><img src="../static/image/xaingqing04.webp" height="1025" width="800"></div>
                        <div><img src="../static/image/xiangqing05.webp" height="1025" width="800"></div>
                        <div><img src="../static/image/xiangqing06.webp" height="1025" width="800"></div>
                        <div><img src="../static/image/xiangqing07.webp" height="1025" width="800"></div>
                        <div><img src="../static/image/xaingqing08.webp" height="1025" width="800"></div>
                    </div>
                </div>
                <div class="detailed-002">
                    <div>
                        <c:forEach var="commentMIE" items="${commentMIES}">
                            <div class="a0101001">
                                <a style="height: 44px;width: 44px; border-radius: 99999px; float: left"><img src="image/${commentMIE.headImg}" width="60px" height="60px" style="border-radius: 9999px"></a>
                                <p style="margin-left: 90px">${commentMIE.nickName}</p>
                                <p style="margin-left: 90px; color: #989b9e;font-size: 10px">${commentMIE.time}</p>
                                <p style="margin-left: 90px; color: #989b9e; font-size: 10px">${commentMIE.purchase}</p>
                                <p style="margin-left: 90px ;font-size: 15px">${commentMIE.content}</p>
                                <c:if test="${not empty commentMIE.img01}">
                                    <p class="ace"><img src="../static/image/${commentMIE.img01}" width="120" height="120"></p>
                                </c:if>
                            </div>
                        </c:forEach>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<a href="findOrderImgServlet">点击点击点击点击点击点击</a>
<script>
    $(".detailed-05").hide();

    $("#address").click(function (){
        $(".detailed-05").toggle();
    });
    //数量增加减少
    function updateAmount(change) {
        var amountInput = document.getElementsByName('amount')[0];
        var currentValue = parseInt(amountInput.value, 10);
        var newValue = currentValue + change;

        // Ensure the amount does not go below 1
        if (newValue < 1) newValue = 1;

        amountInput.value = newValue;
    }

    function plus() {
        updateAmount(1);
    }

    function minus() {
        updateAmount(-1);
    }


    $(document).ready(function() {
        $('.detailed-02 > li').hover(
            function() {
                // 鼠标进入时更新主图像和添加边框
                var newImageSrc = $(this).find('img').attr('data-main');
                $('#main-image').attr('src', newImageSrc);
                $(this).css('border', '2px solid #ff6d6d');
            },
            function() {
                // 鼠标离开时移除边框
                $(this).css('border', 'none');
            }
        );
    });

    $(document).ready(function() {
        $('.detailed-03>ul>li:nth-of-type(4)> a').click(function(e) {
            e.preventDefault(); // Prevent default link behavior

            // Remove 'active' class from all links
            $('.detailed-03>ul>li:nth-of-type(4)>a').removeClass('active');

            // Add 'active' class to the clicked link
            $(this).addClass('active');

            // Optional: Change the main image source based on the data attribute
            var newImageSrc = $(this).attr('data-main01');
            if (newImageSrc) {
                $('#main-image').attr('src', newImageSrc);
            }
        });
    });
    $(document).ready(function() {
        $('#shops').click(function() {
            $('.detailed-001').show();
            $('.detailed-002').hide();
        });

        $('#say').click(function() {
            $('.detailed-001').hide();
            $('.detailed-002').show();
        });
    });
    function updateHiddenFields() {
        var quantity = parseInt(document.querySelector('input[name="amount"]').value, 10);
        var price = parseFloat(document.querySelector('#totalPrice').value);
        var total = quantity * price;

        // 更新隐藏字段的值
        document.querySelector('input[name="number"]').value = quantity;
        document.querySelector('#total').value = total.toFixed(2);
    }

    function minus() {
        var amountInput = document.querySelector('input[name="amount"]');
        var currentValue = parseInt(amountInput.value, 10);
        if (currentValue > 1) { // 假设最小值是1
            amountInput.value = currentValue - 1;
        }
        updateHiddenFields();
    }

    function plus() {
        var amountInput = document.querySelector('input[name="amount"]');
        var currentValue = parseInt(amountInput.value, 10);
        amountInput.value = currentValue + 1;
        updateHiddenFields();
    }
</script>
</body>
</html>

